<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel=stylesheet type=text/css href="css/custom.css">
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/stock.js"></script>
    <script type="text/javascript">        
      function search_onclick(){
        var stockId = document.getElementById('stockId').value
        initChart("mychart", "mytable", stockId)
      }
    </script>
</head>

<body style="background-color:#F2F2F2">
<div id="container" style="width:882px; height:450px;margin-left:auto;margin-right:auto;">
    <div style="height:0px"></div>
    <div id="header">
        <div style="font-weight:600;position:relative;left:50px;top:50px;font-family: calibri, Arial, Helvetica, sans-serif;font-size:29px;color:white">
            Big Data Stock Analysis Demo
        </div>
    </div>
    <div id="body">
        <div id="Menu">
            <div style="position:relative;margin-left:30px; margin-right:20px;margin-top:20px;">
                <!-- form to post to accompany to get accompanying cars -->

                <table style="width:100%">
                    <tr>
                        <td class="sidebar-label">Stock Id:</td>
                    </tr>
                    <tr>
                        <td class="sidebar-label">Example: sh600019, sz000002</td>
                    </tr>
                    <tr>
                        <td style="vertical-align:top;">
                            <input id="stockId" class="sidebar" type="text" name="stockId"/>
                        </td>
                    </tr>
                </table>
                <div class="splitter"></div>
                <div>
                    <button id="search" onclick="search_onclick()">Search</button>
                </div>
            </div>
        </div>
        <div id="content" style="height:100%;width:585px;float:left;position:relative;left:20px;overflow:scroll;">
            <div style="height:50px;position:relative;top:15px;vertical-align:middle;font-weight:300;font-family: calibri, Arial, Helvetica, sans-serif;font-size:22px;color:black">
                Analysis Result:
            </div>
            <div style="height:7px;background-color:#92BDF2;"></div>

            <div id="mychart"></div>

            <div id="mytable"></div>
        </div>
    </div>
    <div id="footer">
        Big Data Team @ Intel
    </div>    
</div>
</body>
</html>